/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
html{
  font-family: 'Noto Sans JP', sans-serif;
}


@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
html{
  font-family: 'Sawarabi Gothic', sans-serif;
}


@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
html{
  font-family: 'M PLUS 1p', sans-serif;
}

html{
  font-family: 'Yu Gothic', '游ゴシック', sans-serif;
}

html{
 font-family: "Lato", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
 */

 @font-face {
  font-family: 'AgencyFBBold';
  src: url('font/AGENCYB.TTF') format('truetype'); /* フォントファイルのパスを指定 */
  font-weight: bold;
  font-style: normal;
}

 @font-face {
  font-family: 'KaisouNextB';
  src: url('font/Kaisotai-Next-UP-B.ttf') format('truetype'); /* フォントファイルのパスを指定 */
  font-weight: normal;
  font-style: normal;
}

html{
  /*font-family: 'AgencyFBBold', "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "MS PMincho", "MS Mincho", sans-serif;*/
  font-family: 'AgencyFBBold', 'KaisouNextB', sans-serif;
  /*font-family: 'Yu Gothic', '游ゴシック', sans-serif;*/
}

body{
 color: #ffffff;
 background-color: #111111;
 padding: 0 0 0 0;
 margin: 0 0 0 0;
 box-sizing: border-box;
}

body,html{
 height: auto;
 width: 100%;
 margin: 0;
 padding: 0;
}

body.iframe{
  background-image: url('s471.jpg');
  background-size: cover; /* 画像を前面に */
  /* position: relative; */
  background-repeat: no-repeat; /* 繰り返しを無効 */
  margin: 0;
  padding: 0;
  display: block;
  border: none;
  /* background-color: #62666b; */
}

body.studio{
  /*background-image: url('s471.jpg');*/
  background-size: cover; /* 画像を前面に */
  background-repeat: no-repeat; /* 繰り返しを無効 */
  background-color: #292929;
}

body.studio .overlay {
  background-image: url('bktest.png');
  background-size: contain; /* 画像のサイズを調整 */
  background-repeat: no-repeat; /* 繰り返しを無効 */
  position: fixed; /* 固定位置 */
  top: 50%; /* 垂直中央に配置 */
  right: 0px; /* 右側に配置 */
  transform: translateY(-50%); /* 垂直中央に調整 */
  opacity: 0.4; /* 陰影をつけるために透明度を設定 */
  width: 1000px;
  height: 600px;
}

div.title{
 margin-top: 5px;
 margin-left: 30px;
 margin-bottom: 5px;
 color: #8d450a;
 font-size: 48px;
}

div.artst,div.artst2,div.artistname{
 font-size: 12px;
 opacity: 0;
}

/*
iframe{
 width: 220px;
 height: 500px;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
}*/
 

iframe.pankuzu{
  width: 800px;
  height: 75px;
  border-top-width: 2px;
  border-right-width: 5px;
  border-bottom-width: 2px;
  border-left-width: 5px;
  border-width: 0px;
  border: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

/*
iframe.contact{
  width: 650px;
  height: 350px;
  border-top-width: 2px;
  border-right-width: 5px;
  border-bottom-width: 2px;
  border-left-width: 5px;
  border-width: 0px;
  border: none;
  margin: 0;
  padding: 0;
  text-align: center;
}*/

table{
 font-size: 0.91em;
 border-spacing: 0px 20px;
 border-collapse: separate;
 height:1120px;
}

table.news{
  font-size: 12px;
  border-spacing: 0px 20px;
  border-collapse: separate;
  height:1120px;
 }

table.table2{
 height: 200px;
 width: 600px;
}

td, th, tr {
 padding: 10px 10px;
 margin: 0 0 0 0;
}

td {
 vertical-align: top;
}

a{
 text-decoration: none;
}

a:link{
 color: white;
}

a:visited{
 color: #FFF3F0;
}

a:hover{
 color: #BAD3FF;
}

.menu a:hover{
  color: #BAD3FF;
 }

a:active{
 color: white;
}

div.category:hover{
 background-color: #008B8B;
}

/*
div.history:hover{
 background-color: #778899;
}
*/

div.history{
 font-size:20px;
 /* font-family: "メイリオ",sans-serif; */
}

div.history:hover{
 background-color:transparent;
}

div.history:visited{
 color: gray;
}

img{
 width: 100%;
 height: auto;
}

img.top{
  display: none;
}

img.sns{
 width: 30px;
 height: 30px;
 margin-top: 15px;
 margin-left: 0px;
 margin-right: 15px;
 margin-bottom: 15px;
}

div.main{
 margin-left: 50px;
 margin-right: 50px;
 margin-bottom: 5px;
 max-width: 1300px;
 font-size: 0.8em;
}

h1.maintitle a:visited {
  font-size: 2em;
  font-weight: normal;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #d18241;
}

h1.studiomaintitle {
  font-size: 2em;
  font-weight: normal;
  padding-top: 0px;
  padding-bottom: 15px;
  color: #2819cbc1;
}

h2 {
  font-size: 1.5em;
  font-weight: normal;
  padding-top: 8px;
  padding-bottom: 8px;
}

h3 {
  font-size: 1.3em;
  font-weight: normal;
  padding-top: 10px;
  padding-bottom: 3px;
  text-align: left;
  border-bottom: 2px solid white; /* 下線の太さと色 */
  display: block;
}


/*
div.mainimg{
 text-align: center;
 float: right;
 margin-bottom: 30px;
 max-width: 980px;
}
*/

div.sns{
 width: 100%;
 text-align: right;
 margin: 30px;
 margin-left: 95px;
}

div.footer{
 font-size: 9px;
 width: 100%;
 text-align: center;
 position: fixed;
 bottom: 0px;
 left: 0px;
}

.footer p {
  text-align:center;
}

div.gallerymenu{
 font-size: 28px;
}

td.studiomenu{
  font-size: 0.92em;
  font-weight:bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0.5) /* 黒い影 */
}

td.studiomenu a:link{
 color: white;
}

td.studiomenu a:visited {
 color: #FFF3F0;
}

td.studiomenu a:hover{
 color: #BAD3FF;
}

td.studiomenu a:active{
 color: white;
}

div.pankuzu{
  padding-top: 8px;
  padding-bottom: 20px;
}

div.pankuzu a:link{
  color: rgb(202, 199, 199);
 }
 

 div.pankuzu a:hover{
  color: #BAD3FF;
 }
 
 div.pankuzu a:active{
  color: rgb(199, 194, 194);
 }

 .pankuzu {
  font-size: 0.8em;
  font-weight: normal;
}

.pankuzu a {
  color: #EEEEEE;
  text-decoration: none;
  background: transparent;
  opacity: 0.8
}

.breadcrumb_divider {
  color: currentColor;
  opacity: .2;
  padding: 0 5px;
}

 .works img{
  width: 180px;
  height: auto;
 }

 .factorymarket img{
  width: 500px;
  height: auto;
 }

 .cutout-shape {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  background-color: #111111;
  clip-path: circle(50% at 50% 50%);
  opacity: 0.7;
 }

 /* CSSリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 画像の表示調整 */
.main img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* コンテナのスタイル */
.content-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* 要素を左揃えにする */
  align-items: flex-start;
  width: 100%;
  gap: 0; /* 要素間の隙間をなくす */
}

.content-container .menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 要素を左揃えにする */
  align-items: flex-start;
  width: 100%;
  gap: 0; /* 要素間の隙間をなくす */
}

/* iframeのスタイル */
.content-container iframe {
  flex: 0 0 15%; /* 幅を 15% に設定 */
  height: 100vh; /* 高さを調整 */
  border: none; /* 枠線を削除 */
  margin-right: 0; /* 右マージンを削除 */
}

/* mainimgのスタイル */
.content-container img {
  flex: 1;
  margin-left: 0;
}

/* メニューのスタイル */
.menu-container {
  display: none; /* デフォルトで非表示 */
}

.menu-toggle {
  display: none; /* デフォルトで非表示 */
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  margin-bottom: 8px;
  color: #EEEEEE;
}

.menu {
  display: none; /* デフォルトで非表示 */
  background-color: rgba(0, 0, 0, 0.8); /* メニューの背景色を半透明の黒に変更 */
  color: #EEEEEE; /* メニューのテキスト色を白に変更 */
  position: fixed; /* 画面全体に表示 */
  top: 0;
  right: 0;
  width: 100%; /* 幅を 100% に設定 */
  height: 100vh; /* 高さを 100vh に設定 */
  padding: 20px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  opacity: 0; /* 初期状態で透明に */
  transition: opacity 0.5s ease, transform 0.5s ease; /* トランジションを追加 */
  transform: translateX(-100%); /* 初期状態で上に隠す */
  z-index: 1000; /* メニューを最前面に表示 */
  display: flex;
  justify-content: center; /* 水平方向の中央に配置 */
  align-items: center; /* 垂直方向の中央に配置 */
}

.menu.open {
  display: flex; /* メニューが開いたときに表示 */
  opacity: 1; /* 不透明に */
  transform: translateX(0); /* 元の位置に */
}

.menu li {
  margin-bottom: 16px;
}

.menu ul {
  color: #EEEEEE; /* メニューリンクの色を白に変更 */
  list-style-type: none; /* li タグの「・」を削除 */
  text-decoration: none;
}

.menu a {
  color: #EEEEEE; /* メニューリンクの色を白に変更 */
  text-decoration: none;
  display: block;
  margin-bottom: 24px;
}

.menu-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #EEEEEE;
  position: absolute;
  top: 10px;
  right: 10px;
  display: none; /* デフォルトで非表示 */
}

.sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.studio-menu.open .sub-menu {
  max-height: 300px; /* 開いた時の最大高さを設定 */
  overflow-y: auto; /* スクロールバーを表示 */
}

.studio-menu .sub-menu {
  max-height: 0; /* 初期状態では非表示 */
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  border: none;
  display: none;;
  /*border-radius: 8px; */ /* 角を丸くする */
  padding-left: 3px;
}

.studio-menu:hover .sub-menu{
  max-height: 500px; /* 開いたときの最大高さ */
  /*background-color: #9090900f; */
  overflow-y: auto;
}

.studio-menu .toggle {
  background: none;
  border: none;
  color: #EEEEEE;
  cursor: pointer;
  text-align: left;
  padding: 0px;
  width: 100%;
  /*font-family: "Lato", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;*/
  /*font-family: 'Yu Gothic', '游ゴシック', sans-serif;*/
  font-family: 'AgencyFBBold', 'KaisouNextB', sans-serif;
  font-size: 1em;
  padding-bottom: 8px; /* .menu li に設定された 16px と足して 24px になるように調整 */
}

.studio-menu .toggle:hover {
  /*text-decoration: underline;*/ /* ホバー時のスタイル */
  color: #BAD3FF;
}

.sub-menu {
  display: none;
}

.sub-menu.open {
  display: block;
}

.studio-menu .sub-menu a {
  max-height: 300px; /* 開いた時の最大高さを設定 */
  overflow-y: auto; /* スクロールバーを表示 */
}

.studio-menu .sub-menu a {
  /* color: #CCCCCC; */
  font-size: 0.7em;
}

.studio-menu .sub-menu a:hover {
  color: #BAD3FF;
}

.sub-menu li {
  margin-top: 24px;
}

.submain {
  width: 100%;
  text-align: left;
  padding-bottom: 200px;
}

.submain ul {
  display: flex;
  flex-direction: column;;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-bottom: 100px;
}

.submain li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

.submain ul li a:hover {
  color: #BAD3FF;
}

.submain img {
  width: 100%;
  text-align: center;
}

.studiomenu ul {
  background-color: #393939;
  width:100%;
}

.image-container3 {
  display: flex;
  justify-content: space-around; /* 子要素を均等に配置します */
  align-items: center; /* 子要素を縦方向の中心に揃えます */
  height: auto; /* ビューポートの高さに合わせます（任意） */
}

.image-container3 img {
  max-width: 33%; /* 画像の最大幅を設定します */
  height: auto; /* 画像の縦横比を維持します */
  padding: 3px;
}

.image-container4 {
  display: flex;
  justify-content: space-around; /* 子要素を均等に配置します */
  align-items: center; /* 子要素を縦方向の中心に揃えます */
  height: auto; /* ビューポートの高さに合わせます（任意） */
}

.image-container4 img {
  max-width: 25%; /* 画像の最大幅を設定します */
  height: auto; /* 画像の縦横比を維持します */
  padding: 3px;
}


/* メディアクエリ */
@media (max-width: 768px) {
  
  body.studio h1.maintitle {
    display: none;
  }

  div.main{
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    max-width:1300;
    font-size: 0.6em;
   }

   h1.maintitle {
    font-size: 1em;
    font-weight: normal;
    padding-top: 8px;
    padding-left: 10px;
    padding-bottom: 8px;
    color: #d18241;
  }

  h1.studiomaintitle {
    font-size: 1em;
    font-weight: normal;
    padding-top: 3px;
    padding-left: 10px;
    padding-bottom: 3px;
    color: #2819cbc1;
  }

  h2 {
    font-size: 1em;
    font-weight: normal;
    padding-top: 3px;
    padding-left: 10px;
    padding-bottom: 3px;
    text-align: center;
  }

  h3 {
    font-size: 1.3em;
    font-weight: normal;
    padding-top: 10px;
    padding-bottom: 3px;
    text-align: center;
    display: block;
  }

  p {
    text-align: left;
  }

  .studio-container {
    padding-top: 10px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 200px;
  }

  div.pankuzu{
    padding-top: 10px;
    padding-bottom: 20px;
  }

  .pankuzu {
    font-size: 0.7em;
    font-weight: normal;
  }

  .pankuzu a {
    padding-top: 3px;
    padding-left: 10px;
    padding-bottom: 3px;
  }

  .content-container {
      flex-direction: column;
  }

  .menu-container {
    display: block; /* 小さい画面では表示 */
  }

  .menu-toggle {
      display: flex; /* 小さい画面では表示 */
      flex-direction: column;
      position: absolute;
      top: 8px;
      right: 10px;
      color: #EEEEEE;
  }

  .menu-toggle span.bar  {
    height: 1px; /* バーの高さ */
    width: 30px; /* バーの幅 */
    background-color: #EEEEEE; /* バーの色 */
    margin: 3px 0; /* バーの間隔 */
    transition: all 0.3s ease; /* アニメーション */
  }

  .batsu {
    position: relative;
    width: 30px; /* バツのサイズ */
    height: 30px; /* バツのサイズ */
    font-size: 24px;
  }

  .batsu::before,
  .batsu::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1px; /* バツの太さ */
      height: 25px; /* バツの長さ */
      background: #EEEEEE; /* バツの色 */
      transform: translate(-50%, -50%); /* 中央に配置 */
  }
  
  .batsu::before {
      transform: translate(-50%, -50%) rotate(45deg); /* 45度回転 */
  }
  
  .batsu::after {
      transform: translate(-50%, -50%) rotate(-45deg); /* -45度回転 */
  }

  .menu {
    display: none; /* 小さい画面では非表示 */
  }

  .menu.open {
    display: flex; /* メニューが開いた時に表示 */
    background-color: #969696;
    font: inherit;
  }

  .menu ul {
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center; /* 垂直方向の中央に配置 */
    align-items: center; /* 水平方向の中央に配置 */
    height: 100%;
    width: 100%;
    text-align: center; /* テキストを中央揃え */
  }

  .menu-close {
    display: flex; /* 小さい画面では表示 */
    position: absolute;
    top: 4px;
    right: 7px;
  }

  .studio-menu.open .sub-menu {
    max-height: 300px; /* 開いた時の最大高さを設定 */
    overflow-y: auto; /* スクロールバーを表示 */
  }

  .studio-menu .toggle {
    text-align: center; /* テキストを中央揃え */
  }

  /*
  .studio-menu:hover .sub-menu{
    max-height: 500px;
    padding: 25px;
    display: block;
    overflow-y: auto;
  }*/

  /*
  .content-container iframe {
      display: none;
  }*/

  .mainimg {
    order: 1; /* 小さい画面では上に表示 */
  }

  .mainimg img {
      width: 100%;
      padding-top: 15px;
  }

  .mainlogo {
    padding: 3px;
  }

}

@media (min-width: 769px) {
  /* コンテナのスタイル */
  .content-container {
    gap: 15px; /* 大きい画面の時だけ要素間の隙間を作る */
  }

  .menu-container {
      display: block; /* 大きい画面では表示 */
      flex: 0 0 15%; /* 幅を15%に設定 */
      height: 100vh; /* 高さを調整 */
      border: none; /* 枠線を削除 */
      width: 250px;
  }

  .menu-toggle {
      display: none; /* 大きい画面では非表示 */
  }

  .menu {
    display: block; /* 大きい画面では表示 */
    background-color: transparent; /* 大きい画面では背景色を透明に */
    color: #111111; /* 大きい画面ではテキスト色を黒に */
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    box-shadow: none;
    opacity: 1; /* 不透明に */
    transform: none; /* 位置をリセット */
    transition: none; /* トランジションを無効に */
  }

  .menu a {
    color: #EEEEEE; /* 大きい画面ではリンクの色を白に */
  }

  .menu-close {
    display: none; /* 大きい画面では非表示 */
  }
}

p {
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: left;
}

.special {
  text-align: center;
  margin-bottom: 20px;
}



div#carousel { 
  perspective: 1200px; 
  background: #100000; 
  padding-top: 10%; 
  font-size:0; 
  margin-bottom: 3rem; 
  overflow: hidden; 
}
figure#spinner { 
  transform-style: preserve-3d; 
  height: 300px;
  height: 650px;
  transform-origin: 50% 50% -500px; 
  transition: 1s; 
} 
figure#spinner img { 
  width: 40%; max-width: 425px; 
  position: absolute; left: 30%;
  transform-origin: 50% 50% -500px;
  outline:1px solid transparent; 
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg); 
}
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span { 
  color: #fff; 
  margin: 5%; 
  display: inline-block; 
  text-decoration: none; 
  font-size: 2rem; 
  transition: 0.6s color; 
  position: relative; 
  margin-top: -6rem; 
  border-bottom: none; 
  line-height: 0; }
div#carousel ~ span:hover { color: #888; cursor: pointer; }